<template>
	<div id="loginContainer">
		<el-row class="cardRow" justify="center" align="middle" type="flex">
			<el-col :span="24" :xs="16" :sm="12" :md="9" :lg="7" :xl="5">
				<div class="card">
					<div class="title">YuQing后台管理系统</div>

					<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
						<el-form-item prop="username">
							<el-input v-model="loginForm.username" placeholder="请输入用户名" clearable @keyup.enter="login"></el-input>
						</el-form-item>

						<el-form-item prop="password">
							<el-input v-model="loginForm.password" placeholder="请输入密码" clearable type="password" @keyup.enter="login"></el-input>
						</el-form-item>

						<el-form-item>
							<div class="checkboxBox">
								<el-checkbox v-model="loginForm.remember" label="记住密码" size="large" />
							</div>
						</el-form-item>

						<el-button class="w-100" type="primary" @click="login">登录</el-button>
					</el-form>
				</div>
			</el-col>
		</el-row>

		<div class="footer">
			<a href="https://beian.miit.gov.cn" target="_blank">Copyright © 2018-2024 ruoyi.vip All Rights Reserved. 粤ICP备18046899号</a>
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue";
import { ElLoading } from "element-plus";
import { userStore } from "@/stores/user";
const user = userStore();

const loginFormRef = ref(null);
const loginForm = ref({ username: "admin", password: "123456", remember: false });
const loginFormRules = ref({
	username: [{ required: true, message: "请输入用户名", trigger: "touchend" }],
	password: [{ required: true, message: "请输入密码", trigger: "touchend" }],
});

const login = async () => {
	try {
		await loginFormRef.value.validate();
	} catch (e) {
		return;
	}

	const loadindService = ElLoading.service({ text: "登录中..." });
	try {
		await user.login(loginForm.value);
	} finally {
		loadindService.close();
	}
};
</script>

<style scoped lang="scss">
#loginContainer {
	height: 100vh;
	width: 100vw;

	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	background: url("../../assets/loginBackground.jpg");
	background-size: cover;
	background-position: center;

	.cardRow {
		width: 100%;
		flex: 1;

		:deep(.card) {
			width: 100%;
			padding: 20px;
			border-radius: 4px;
			background-color: white;

			.title {
				text-align: center;
				font-size: 24px;
				color: #000000a8;
				margin-bottom: 25px;
			}

			.checkboxBox {
				margin-top: -10px;
				margin-bottom: -10px;
			}
		}
	}

	.footer {
		bottom: 10px;
		position: fixed;

		a {
			font-size: 14px;
			color: #fff;
		}
	}
}
</style>
